<template>
    <div>
      <div class="head">
        <headCommod/>
      </div>
      <img style="width: 100%;margin-top: 97px;" src="../assets/images/aboutus/contact.jpg"/>
      <div class="main">
        <div class="cl">
          <h1 class="to-top">关于我们</h1>
          <p class="to-top">Hangsen has three international centers in Europe, USA and Asia. We possess ISO 9, HACCP certificate (Hazard Analysis and Critical Control Point) and GMP certificate, guaranteeing the consistent and high standard quality. Hangsen also has built the first and only CNAS certified chemical lab, which can take third party samples and certify them with testing. </p>

          <div class="experience to-top">
            <p class="p font-1">Hangsen has three international centers in Europe</p>
            <span class="p year-1">2005</span>
            <p class="p font-2">Hangsen has three international centers in Europe，Hangsen has three international centers in Europe</p>
            <span class="p year-2">2009</span>
            <p class="p font-3">international centers in，Hangsen has three international centers in Europe</p>
            <span class="p year-3">2010</span>
            <p class="p font-4">gsen has three international centers in Europe，Hangsen has three</p>
            <span class="p year-4">2012</span>
            <p class="p font-5">Hangsen has three international centers</p>
            <span class="p year-5">2015</span>
            <p class="p font-6">has three international centers</p>
            <span class="p year-6">2018</span>
            <p class="p font-7">ers in，Hangsen has three international</p>
            <span class="p year-7">2021</span>
          </div>
          <div class="map to-top">
            <markerCommod
              v-for="(item, key) in markers"
              :key="key"
              :position="item.position"
              :style="{position: 'absolute', left: item.x + 'px', top: item.y + 'px'}"
              :name="item.name"
              :color="item.color"/>
          </div>
        </div>
      </div>
      <bottomCommod/>
    </div>
</template>

<script>
import headCommod from '../components/Head'
import bottomCommod from '../components/bottom'
import markerCommod from '../components/marker'

export default {
  name: 'fcl',
  data () {
    return {
      markers: [
        {
          name: '美国',
          x: 130,
          y: 130,
          position: 'right',
          color: 'red'
        },
        {
          name: '德国',
          x: 500,
          y: 93,
          position: 'right',
          color: 'green'
        },
        {
          name: '中国',
          x: 850,
          y: 180,
          position: 'left',
          color: 'green'
        },
        {
          name: '法国',
          x: 423,
          y: 132,
          position: 'left',
          color: 'red'
        }
      ],
      form: {
        type: [],
        tableData: []
      }
    }
  },
  mounted () {
  },
  components: {
    headCommod,
    bottomCommod,
    markerCommod
  }
}
</script>

<style scoped>
  .main {
    background: #fff;
  }

  .main h1 {
    text-align: center;
    margin: 50px 0;
    font-size: 60px;
  }

  .main p {
    width: 60%;
    min-width: 1000px;
    margin: 0 auto;
    font-size: 30px;
    font-size: 20px;
    color: #999;
    text-align: center;
  }

  .main img {
    max-width: 80%;
    margin: 30px auto;
    min-width: 1200px;
    display: block;
  }

  .map {
    background: url("../assets/images/aboutus/map_bg.jpg") no-repeat center center;
    width: 1200px;
    background-size: cover;
    height: 600px;
    margin: 20px auto;
    position: relative;
  }

  .experience {
    background: url("../assets/images/aboutus/aboutus.jpg") no-repeat center center;
    background-size: cover;
    height: 520px;
    width: 1200px;
    margin: 50px auto;
    position: relative;
  }

  .experience .p {
    position: absolute;
    text-align: center;
    min-width: 10px;
  }

  .experience .font-1 {
    left: 0;
    width: 130px;
    bottom: 61%;
  }

  .experience .year-1 {
    left: 0;
    width: 130px;
    top: 47%;
    font-size: 25px;
  }

  .experience .font-2 {
    left: 140px;
    width: 240px;
    top: 76%;
  }

  .experience .year-2 {
    left: 140px;
    width: 240px;
    top: 36%;
    font-size: 25px;
  }

  .experience .font-3 {
    left: 300px;
    width: 280px;
    bottom: 70%;
  }

  .experience .year-3 {
    left: 300px;
    width: 280px;
    top: 47%;
    font-size: 25px;
  }

  .experience .font-4 {
    left: 510px;
    width: 220px;
    top: 76%;
  }

  .experience .year-4 {
    left: 510px;
    width: 220px;
    top: 36%;
    font-size: 25px;
  }

  .experience .font-5 {
    left: 650px;
    width: 280px;
    bottom: 70%;
  }

  .experience .year-5 {
    left: 650px;
    width: 280px;
    top: 47%;
    font-size: 25px;
  }

  .experience .font-6 {
    left: 850px;
    width: 220px;
    top: 55%;
  }

  .experience .year-6 {
    left: 850px;
    width: 220px;
    top: 36%;
    font-size: 25px;
  }

  .experience .font-7 {
    left: 1060px;
    width: 150px;
    bottom: 70%;
  }

  .experience .year-7 {
    left: 1060px;
    width: 150px;
    top: 47%;
    font-size: 25px;
  }

</style>
